<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard :title="$route.meta.title" isright="isright">
            <template slot="right">
              <div class="search">
                <el-input
                  size="mini"
                  placeholder="请输入问题"
                  v-model="searchValue"
                  @keyup.enter.native="searchinput(searchValue)"
                >
                  <i class="el-icon-search el-input__icon" slot="suffix"> </i>
                </el-input>
              </div>
            </template>
            <div class="secondLevel">
              <ul>
                <li
                  v-for="(t, index) in issuesList"
                  :key="t.id"
                  @click="handlerIssues(t, index)"
                  :class="selectId == t.id ? 'isActive' : ''"
                >
                  {{ t.title }}
                  <p v-html="t.content.replace(/<[^>]+>|&[^>]+;/g,'').substring(0,50)" v-if="t.content"></p>
                
                </li>
              </ul>
            </div>
            <!-- <div class="issuesList"> -->
            <!-- <el-collapse
                @change="collapseChange"
                v-model="activeName"
                accordion
              >
                <el-collapse-item
                v-for="(iss, index) in issuesList"
                  :key="iss.id"
                  :title="iss.title"
                  :name="index"
                >
                  <div>
                    <span v-html="iss.content"></span>
                    <a @click="handlerIssues">阅读原文</a>
                  </div>
                </el-collapse-item>
              </el-collapse> -->
            <!-- </div> -->
          </NewCard>
        </el-col>
        <el-col :span="14">
          <template v-if="isclick">
            <Details :selectIss="selectIss"></Details>
          </template>
          <div v-else class="featuredContent">
            <template>
              <FeaturedContent></FeaturedContent>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import FeaturedContent from "@/components/FeaturedContent/index.vue";

import Details from "./details.vue";
import NewCard from "@/wss/components/newCard.vue";
import { gethelpslist } from "../../../../BMViews/api/helpCenter/helpCenter";
import { helpType } from "@/wss/utils/wss.js";

export default {
  name: "AccountProblem",
  components: { NewCard, Details, FeaturedContent },
  data() {
    return {
      isclick: false,
      currentIndex: "",
      isright: true, //显示搜索框
      searchValue: "", //搜索框输入的值
      activeName: "", //默认展示的面板
      issuesList: [],
      selectIss: {},
      selectId: "", //当前选中的id
      newArr: [],
    };
  },
  mounted() {
    this.gethelpslistfn();
    // this.selectIss = this.issuesList[0]; //默认选中第一条问题
  },
  methods: {
    async gethelpslistfn() {
      // {type:this.$route.meta.id}
      let { data, code } = await gethelpslist();
      if (code == 200) {
        //把数组对象转换为树状结构
        let helpList = helpType(data.rows);
        // 获取当前点击的问题组
        this.issuesList = helpList.find((item) => {
          return item.typeId == this.$route.meta.typeId;
        }).children;

        this.newArr = this.issuesList;
      }
    },

    searchinput(value) {
      let issuesList = this.issuesList;
      let newArr = this.newArr;
      issuesList = newArr.filter((item) => {
        return item.title.includes(value);
      });
      this.issuesList = issuesList;
    },

    // 当前激活面板改变时触发
    collapseChange(index) {
      // typeof index == "number" ? (this.isclick = true) : (this.isclick = false);
      this.selectIss = this.issuesList[index];
    },

    //单击阅读原文
    handlerIssues(iss, index) {
      console.log(iss, "123");
      this.isclick = true;
      this.currentIndex = index;
      this.selectIss = this.issuesList[index];
      this.selectId = iss.id;
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .el-card__body .top {
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 搜索 */
::v-deep .search .el-input__inner {
  border-radius: 18px;
}
.search .el-button {
  border: 0;
  margin-top: 4px;
  padding: 6px;
  font-size: 16px;
}

.secondLevel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.secondLevel ul > li {
  position: relative;
  /* left: 0;
  top: 0; */
  padding: 15px 30px;
  border-bottom: 1px solid #efefef;
  font-weight: 700;
  cursor: pointer;
}
.secondLevel ul > li p  {
  width: 100%;
  font-size: 14px;
  color: #666666;
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.secondLevel ul > li p >>> p {
  width: 100%;
  color: #666666;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.secondLevel ul > li:hover,
.secondLevel ul > li.isActive {
  background-color: #f4f5f8;
}
.tagActive {
  background-color: #f4f5f8;
  /* color: #ccc; */
}

/* 问题列表 */
/* .issuesList .el-collapse {
  border: 0;
}
.issuesList .el-collapse-item {
  padding: 0 30px;
}
.issuesList >>> .el-collapse-item__wrap,
.issuesList >>> .el-collapse-item__header {
  background-color: transparent !important;
}
.issuesList >>> .el-collapse-item__header {
  font-weight: bold;
  font-size: 16px;
  height: auto;
  padding: 11px 0;
}
.issuesList >>> .el-collapse-item__header.focusing{
  color: #303133;
}
.issuesList >>> .el-collapse-item__header .el-collapse-item__arrow{
  margin: 0 0px 0 auto;
}
.issuesList >>> .el-collapse-item__header .el-icon-arrow-right:before{
  content: "\E6DF";
}
.issuesList >>> .el-collapse-item__header .el-collapse-item__arrow.is-active{
  transform: rotate(-180deg);
}
.issuesList >>> .el-collapse-item__content > div > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.issuesList >>> .el-collapse-item__content > div > span p {
  margin: 0;
  display: inline;
}
.issuesList >>> .el-collapse-item__content > div > a {
  color: #39486f;
}

.issuesList >>> .el-collapse-item__header.is-active {
  padding-bottom: 0;
  line-height: 36px;
}
.issuesList .el-collapse-item:hover,
.issuesList .el-collapse-item.is-active,
.issuesList >>> .el-collapse-item__header.is-active {
  background-color: #f4f5f8;
} */
/* 組件樣式衝突 */
>>> .featuredContent .el-card__body {
  padding: 0 30px;
}
>>> .featuredContent .el-card__body > .top {
  margin: 0;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
  .secondLevel ul > li {
    padding: 12px 30px;
    font-size: 14px;
  }
}
</style>
